import React, { useState, useEffect } from 'react';
import { ShoppingCart, X, Plus, Minus, MapPin, Phone, Clock, ArrowRight, CheckCircle2 } from 'lucide-react';

// --- 數據定義 (Data Models) ---
// 基於資料驅動視圖的邏輯，將商品資訊獨立出來，便於未來串接資料庫
const PRODUCTS = [
  {
    id: 1,
    name: '雲朵特級床墊',
    description: '多層次獨立筒與透氣記憶棉的完美結合，給予脊椎最適切的支撐。',
    price: 15800,
    image: 'https://images.unsplash.com/photo-1554995207-c18c203602cb?q=80&w=800&auto=format&fit=crop'
  },
  {
    id: 2,
    name: '呼吸記憶枕',
    description: '慢回彈高密度材質，符合人體工學，釋放頸部壓力。',
    price: 2500,
    image: 'https://images.unsplash.com/photo-1584100936595-c0654b55a2e6?q=80&w=800&auto=format&fit=crop'
  },
  {
    id: 3,
    name: '輕柔純棉被套組',
    description: '100% 雙層水洗棉，如同親膚內衣般的極致柔軟體驗。',
    price: 3200,
    image: 'https://images.unsplash.com/photo-1522771731535-64582f34791a?q=80&w=800&auto=format&fit=crop'
  }
];

export default function App() {
  // --- 狀態管理 (State Management) ---
  const [cart, setCart] = useState([]);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [toastMessage, setToastMessage] = useState(null);

  // --- 業務邏輯 (Business Logic) ---
  const addToCart = (product) => {
    setCart(prevCart => {
      const existingItem = prevCart.find(item => item.id === product.id);
      if (existingItem) {
        return prevCart.map(item => 
          item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
        );
      }
      return [...prevCart, { ...product, quantity: 1 }];
    });
    setIsCartOpen(true);
  };

  const updateQuantity = (id, delta) => {
    setCart(prevCart => {
      return prevCart.map(item => {
        if (item.id === id) {
          const newQuantity = item.quantity + delta;
          return newQuantity > 0 ? { ...item, quantity: newQuantity } : null;
        }
        return item;
      }).filter(Boolean); // 過濾掉 null 的項目 (即數量被扣到 0 的商品)
    });
  };

  const handleCheckout = () => {
    if (cart.length === 0) return;
    // 模擬送出訂單
    setIsCartOpen(false);
    setCart([]);
    showToast("訂單已成功送出！感謝您的購買。");
  };

  const showToast = (msg) => {
    setToastMessage(msg);
    setTimeout(() => setToastMessage(null), 3000);
  };

  // 衍生狀態 (Derived State)
  const cartTotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
  const cartItemCount = cart.reduce((count, item) => count + item.quantity, 0);

  return (
    // 使用指定的色彩計畫，並設定全域字體與背景紋理
    <div className="min-h-screen bg-[#F5F5F5] text-[#1F1F1F] font-sans selection:bg-[#88B7E0] selection:text-white relative overflow-hidden" 
         style={{ backgroundImage: 'radial-gradient(#e5e5e5 1px, transparent 0)', backgroundSize: '20px 20px' }}>
      
      {/* 系統提示訊息 (Toast) */}
      {toastMessage && (
        <div className="fixed top-24 left-1/2 transform -translate-x-1/2 z-50 bg-white shadow-[0_8px_30px_rgb(0,0,0,0.08)] rounded-full px-6 py-3 flex items-center gap-3 animate-fade-in-down transition-all">
          <CheckCircle2 className="w-5 h-5 text-[#88B7E0]" />
          <span className="font-medium tracking-wide">{toastMessage}</span>
        </div>
      )}

      {/* --- 導覽列 (Navigation) --- */}
      <nav className="fixed w-full top-0 z-40 bg-[#F5F5F5]/80 backdrop-blur-md border-b border-gray-200/50">
        <div className="max-w-7xl mx-auto px-6 md:px-12 py-5 flex justify-between items-center">
          <div className="text-2xl font-black tracking-tighter flex items-center gap-2 cursor-pointer">
            <div className="w-8 h-8 bg-[#88B7E0] rounded-xl flex items-center justify-center text-white text-xs">S</div>
            SYH bad.
          </div>
          <div className="flex items-center gap-6">
            <button className="text-sm font-medium hover:text-[#88B7E0] transition-colors hidden md:block">線上商城</button>
            <button className="text-sm font-medium hover:text-[#88B7E0] transition-colors hidden md:block">門市體驗</button>
            <button 
              onClick={() => setIsCartOpen(true)}
              className="relative p-2 bg-white rounded-full shadow-sm hover:shadow-md transition-all group"
            >
              <ShoppingCart className="w-5 h-5 text-gray-700 group-hover:text-[#88B7E0] transition-colors" />
              {cartItemCount > 0 && (
                <span className="absolute -top-1 -right-1 bg-[#88B7E0] text-white text-[10px] font-bold w-5 h-5 flex items-center justify-center rounded-full border-2 border-[#F5F5F5]">
                  {cartItemCount}
                </span>
              )}
            </button>
          </div>
        </div>
      </nav>

      {/* --- 英雄區塊 (Hero Section) --- */}
      <header className="relative pt-32 pb-20 md:pt-48 md:pb-32 px-6 md:px-12 max-w-7xl mx-auto overflow-hidden">
        {/* 背景大字裝飾 (Oversized background typography) */}
        <div className="absolute top-20 -left-10 text-[8rem] md:text-[12rem] font-black text-gray-200/40 select-none pointer-events-none tracking-widest z-0">
          BREATHE
        </div>
        
        <div className="relative z-10 grid md:grid-cols-2 gap-12 items-center">
          <div className="space-y-8">
            <span className="inline-block px-4 py-1.5 bg-white rounded-full text-xs font-bold tracking-widest text-[#88B7E0] shadow-sm">
              NEW LIFESTYLE
            </span>
            <h1 className="text-5xl md:text-6xl font-black leading-[1.15] tracking-tight text-[#1F1F1F]">
              讓每一晚的睡眠，<br />
              都充滿<span className="text-[#88B7E0]">呼吸感</span>。
            </h1>
            <p className="text-gray-500 text-lg md:text-xl leading-relaxed max-w-md font-medium">
              以現代日系簡約為核心，我們重新定義了寢具的有機感與舒適度。為理性的你，提供最純粹的支撐。
            </p>
            <button className="flex items-center gap-2 bg-[#88B7E0] hover:bg-[#729ac0] text-white px-8 py-4 rounded-full font-bold tracking-widest transition-all shadow-lg shadow-[#88B7E0]/30 hover:-translate-y-1">
              探索產品 <ArrowRight className="w-5 h-5" />
            </button>
          </div>
          
          <div className="relative">
            {/* 浮動佈局的圖片容器 (Floating layout with hyper-rounded corners) */}
            <div className="aspect-[4/3] rounded-[40px] md:rounded-[60px] overflow-hidden shadow-[0_20px_50px_rgb(0,0,0,0.08)] border-8 border-white bg-white">
              <img 
                src="https://images.unsplash.com/photo-1505693416035-af855e2c56a8?q=80&w=1000&auto=format&fit=crop" 
                alt="SYH bad minimalist bedroom" 
                className="w-full h-full object-cover"
              />
            </div>
            <div className="absolute -bottom-6 -left-6 bg-white p-6 rounded-[30px] shadow-[0_10px_30px_rgb(0,0,0,0.06)] border border-gray-100 max-w-[200px]">
              <div className="flex gap-1 text-[#88B7E0] mb-2">★★★★★</div>
              <p className="text-sm font-medium text-gray-600">"支撐力符合物理力學，完美的平衡。"</p>
            </div>
          </div>
        </div>
      </header>

      {/* --- 產品區塊 (Products Section) --- */}
      <section className="py-24 bg-white rounded-t-[60px] md:rounded-t-[80px] shadow-[0_-10px_40px_rgb(0,0,0,0.02)] relative z-10">
        <div className="max-w-7xl mx-auto px-6 md:px-12">
          <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
            <div>
              <h2 className="text-3xl md:text-4xl font-black mb-4 tracking-tight">純粹之選</h2>
              <p className="text-gray-500 font-medium">去除多餘裝飾，只保留睡眠最需要的機能與舒適。</p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
            {PRODUCTS.map(product => (
              <div key={product.id} className="group flex flex-col">
                <div className="aspect-square rounded-[40px] overflow-hidden bg-[#F5F5F5] mb-6 relative shadow-sm group-hover:shadow-[0_15px_40px_rgb(0,0,0,0.06)] transition-all duration-500">
                  <img src={product.image} alt={product.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" />
                  <button 
                    onClick={() => addToCart(product)}
                    className="absolute bottom-6 right-6 w-14 h-14 bg-white text-[#1F1F1F] hover:bg-[#88B7E0] hover:text-white rounded-full flex items-center justify-center shadow-lg transition-colors z-10"
                  >
                    <Plus className="w-6 h-6" />
                  </button>
                </div>
                <div className="px-2">
                  <h3 className="text-xl font-bold mb-2">{product.name}</h3>
                  <p className="text-gray-500 text-sm mb-4 line-clamp-2 h-10">{product.description}</p>
                  <p className="text-xl font-black text-[#88B7E0]">NT$ {product.price.toLocaleString()}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* --- 店家資訊區塊 (Store Information) --- */}
      <section className="py-24 bg-[#F5F5F5]">
        <div className="max-w-7xl mx-auto px-6 md:px-12">
          <div className="bg-white rounded-[40px] md:rounded-[60px] p-8 md:p-16 shadow-[0_15px_50px_rgb(0,0,0,0.04)] grid md:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <h2 className="text-3xl font-black tracking-tight">門市體驗空間</h2>
              <p className="text-gray-500 font-medium leading-relaxed">
                我們深知數據無法取代體感。歡迎來到我們位於台北的實體據點，親自感受每一寸材質的回饋力道與呼吸感。
              </p>
              
              <div className="space-y-6 pt-4">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-gray-50 rounded-[18px] flex items-center justify-center shrink-0">
                    <MapPin className="w-5 h-5 text-[#88B7E0]" />
                  </div>
                  <div>
                    <h4 className="font-bold text-lg mb-1">SYH bad 台北旗艦店</h4>
                    <p className="text-gray-500">106 台北市大安區羅斯福路四段1號<br/>(近台大公館商圈)</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-gray-50 rounded-[18px] flex items-center justify-center shrink-0">
                    <Clock className="w-5 h-5 text-[#88B7E0]" />
                  </div>
                  <div>
                    <h4 className="font-bold text-lg mb-1">營業時間</h4>
                    <p className="text-gray-500">週一至週日 11:00 - 21:00</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-gray-50 rounded-[18px] flex items-center justify-center shrink-0">
                    <Phone className="w-5 h-5 text-[#88B7E0]" />
                  </div>
                  <div>
                    <h4 className="font-bold text-lg mb-1">客服專線</h4>
                    <p className="text-gray-500">02-2366-XXXX</p>
                  </div>
                </div>
              </div>
            </div>
            
            {/* 抽象的地圖視覺表示 (避免真實地圖 iframe 帶來的效能與風格破壞) */}
            <div className="bg-[#F5F5F5] rounded-[40px] h-full min-h-[300px] md:min-h-[400px] relative overflow-hidden flex items-center justify-center group border-4 border-white shadow-inner">
               <div className="absolute inset-0 opacity-20" style={{ backgroundImage: 'radial-gradient(#88B7E0 2px, transparent 0)', backgroundSize: '30px 30px' }}></div>
               <div className="relative bg-white w-24 h-24 rounded-full shadow-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                 <MapPin className="w-8 h-8 text-[#88B7E0]" />
               </div>
               <div className="absolute bottom-8 bg-white/80 backdrop-blur-sm px-6 py-3 rounded-full text-sm font-bold text-gray-600 shadow-sm">
                 大安區實體據點
               </div>
            </div>
          </div>
        </div>
      </section>

      {/* --- 頁尾 (Footer) --- */}
      <footer className="bg-white py-12 border-t border-gray-100">
        <div className="max-w-7xl mx-auto px-6 md:px-12 flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="text-xl font-black tracking-tighter text-gray-300">
            SYH bad.
          </div>
          <div className="text-gray-400 text-sm font-medium">
            © 2026 SYH bad. All rights reserved. Designed with First Principles.
          </div>
        </div>
      </footer>

      {/* --- 購物車側邊欄 (Shopping Cart Drawer) --- */}
      {/* 背景遮罩 */}
      {isCartOpen && (
        <div 
          className="fixed inset-0 bg-[#1F1F1F]/20 backdrop-blur-sm z-50 transition-opacity"
          onClick={() => setIsCartOpen(false)}
        />
      )}
      
      {/* 側邊欄面板 */}
      <div className={`fixed top-0 right-0 h-full w-full md:w-[450px] bg-white z-50 shadow-[-20px_0_50px_rgb(0,0,0,0.05)] transform transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] flex flex-col ${isCartOpen ? 'translate-x-0' : 'translate-x-full'}`}>
        
        {/* 購物車頭部 */}
        <div className="px-8 py-6 flex justify-between items-center border-b border-gray-100">
          <h2 className="text-2xl font-black tracking-tight">購物車</h2>
          <button 
            onClick={() => setIsCartOpen(false)}
            className="p-2 hover:bg-gray-50 rounded-full transition-colors"
          >
            <X className="w-6 h-6 text-gray-500" />
          </button>
        </div>

        {/* 購物車商品列表 */}
        <div className="flex-1 overflow-y-auto px-8 py-6 space-y-6">
          {cart.length === 0 ? (
            <div className="h-full flex flex-col items-center justify-center text-gray-400 gap-4">
              <ShoppingCart className="w-16 h-16 opacity-50" />
              <p className="font-medium tracking-wide">您的購物車目前是空的</p>
            </div>
          ) : (
            cart.map(item => (
              <div key={item.id} className="flex gap-4 items-center bg-gray-50 p-3 rounded-[24px]">
                <img src={item.image} alt={item.name} className="w-20 h-20 rounded-[16px] object-cover bg-white" />
                <div className="flex-1">
                  <h4 className="font-bold text-[#1F1F1F]">{item.name}</h4>
                  <p className="text-[#88B7E0] font-black mt-1">NT$ {item.price.toLocaleString()}</p>
                </div>
                {/* 數量控制按鈕 (Pill-shaped) */}
                <div className="flex items-center gap-3 bg-white px-3 py-2 rounded-full shadow-sm border border-gray-100">
                  <button onClick={() => updateQuantity(item.id, -1)} className="text-gray-400 hover:text-[#1F1F1F]"><Minus className="w-4 h-4" /></button>
                  <span className="font-bold w-4 text-center text-sm">{item.quantity}</span>
                  <button onClick={() => updateQuantity(item.id, 1)} className="text-gray-400 hover:text-[#1F1F1F]"><Plus className="w-4 h-4" /></button>
                </div>
              </div>
            ))
          )}
        </div>

        {/* 結帳區塊 */}
        {cart.length > 0 && (
          <div className="px-8 py-6 bg-gray-50/50 border-t border-gray-100">
            <div className="flex justify-between items-center mb-6">
              <span className="text-gray-500 font-medium">總計</span>
              <span className="text-3xl font-black text-[#1F1F1F]">NT$ {cartTotal.toLocaleString()}</span>
            </div>
            <button 
              onClick={handleCheckout}
              className="w-full bg-[#1F1F1F] hover:bg-black text-white py-4 rounded-full font-bold tracking-widest text-lg transition-transform hover:-translate-y-1 shadow-xl shadow-black/10"
            >
              前往結帳
            </button>
          </div>
        )}
      </div>

    </div>
  );
}